<template>
    <div>
        <div v-if="res">
            <h1>{{ res.name }}（{{ res.sId }}）详细信息</h1>
            <p>
                <img :src="`http://182.92.193.159:5050/images/student_avatar/${res.avatar}`" class="avatar">
            </p>
            <el-descriptions :column="3" size="medium" border>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        姓名
                    </template>
                    {{res.name}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        手机号
                    </template>
                    {{res.tel}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        政治面貌：
                    </template>
                    {{res.politics_status}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        学院
                    </template>
                    {{res.collegeName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        专业
                    </template>
                    {{res.majorName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        性别
                    </template>
                    {{res.sex}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        班级
                    </template>
                    {{res.className}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        生日
                    </template>
                    {{moment(res.birthDay).format('YYYY-MM-DD')}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        民族
                    </template>
                    {{res.nationality}}
                </el-descriptions-item>
            </el-descriptions>
        </div>

    </div>
</template>

<script>
import { getOneStudentDedail } from '@/api/student.js';
import moment from 'moment';

export default {
    async created() {
        this.sid = this.$route.params.sid;
        // 发出Ajax
        let res = await getOneStudentDedail(this.sid);
        // 服务器给我的对象
        this.res = res;
    },
    data() {
        return {
            // 学号
            sid: '',
            // 服务器给我的对象
            res: null
        }
    },
    methods: {
        moment
    }
}
</script>

<style lang="less" scoped>
.avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}
</style>